<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
</head>

<body>
<div class="layui-form layuimini-form" lay-filter="form-filter">
    <div class="layui-form-item">
        <label class="layui-form-label required">ID</label>
        <div class="layui-input-block">
            <input type="number" name="id" lay-verify="required" lay-reqtext="Id不能为空" class="layui-input" readonly>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">用户ID</label>
        <div class="layui-input-block">
            <input type="number" name="userId" lay-verify="required" lay-reqtext="用户ID不能为空" placeholder="请输入用户ID"
                   value="" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">医生ID</label></label>
        <div class="layui-input-block">
            <input type="number" name="doctorUserId" lay-verify="required" lay-reqtext="医生ID不能为空" placeholder="请输入医生ID" value="" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">预约日期</label>
        <div class="layui-input-block">
            <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">时间段</label>
        <div class="layui-input-block">
            <select name="timeQuantumId" lay-filter="timeQuantumSelect" id="timeQuantumSelect">
                <option value="1">08:00 -- 10:00</option>
                <option value="2">10:00 -- 12:00</option>
                <option value="3">14:00 -- 16:00</option>
                <option value="4">16:00 -- 18:00</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">病情信息</label>
        <div class="layui-input-block">
            <input type="text" name="message" lay-verify="required" lay-reqtext="病情信息不能为空" placeholder="病情信息"
                   value="" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">预约费用</label>
        <div class="layui-input-block">
            <input type="number" name="cost" lay-verify="required" lay-reqtext="请输入费用"  placeholder="请输入缴纳费用" value="100" class="layui-input">
        </div>
    </div>



    <div class="layui-form-item">
        <label class="layui-form-label required">预约状态id</label>
        <div class="layui-input-block">
            <select name="bookStatusId" lay-filter="bookStatusSelect" id="bookStatusSelect">
                <option value="1">未支付</option>
                <option value="2">已支付</option>
                <option value="3">已完成</option>
                <option value="4">已取消</option>
                <option value="4">异常</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>

</div>

<!-- <script type="text/html" id="imgtmp">
<img src="{{d.icon}}" style="height: 100%; width: 100%;" /> -->
<!-- </script> -->

<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>



    //说明:获取url参数
    //参数obj:访问路径
    //返回值:参数
    var id = getQueryString("id");

    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r !== null)
            return unescape(r[2]);
        return null;
    }


    layui.use(['form', 'table'], function () {
        var $ = layui.jquery,
            form = layui.form,
            laydate = layui.laydate,
            layer = layui.layer;

        //日期
        laydate.render({
            elem: '#date'
        });

        //获取获取当前预约详情
        $.post("http://localhost:8080/api/book/getBook", {
            id: id
        }, (data, status) => {
            if (status === "success" && data.code === 0) {
                let book = data.data;
                form.val("form-filter",{
                    id:book.id,
                    userId:book.userId,
                    doctorUserId:book.doctorUserId,
                    date:book.date,
                    timeQuantumId:book.timeQuantumId,
                    message: book.message,
                    cost: book.cost,
                    bookStatusId:book.bookStatusId
                })
            } else {
                layer.alert("获取信息失败,请刷新");
            }
        })





        //监听提交
        form.on('submit(saveBtn)', function (data) {

            //异步请求添加数据
            $.ajax({
                url: "http://localhost:8080/api/book/modifyBook",
                method:"post",
                data:data.field,
                success:function (result) {
                    if (result.code === 0) {
                        //添加成功
                        layer.msg(result.msg,{time: 1000},function () {
                            //关闭窗口
                            let iframeIndex = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(iframeIndex);
                        })
                    } else {
                        layer.msg("修改失败");
                    }
                },
                error:function (result) {
                    layer.msg("修改失败");
                }
            })


            return false;
        });


    });
</script>

</body>

</html>